<template>
  <el-row class="outside">
    <el-col :span="2">
      <router-link :to="{ name:'index'}">
        <el-avatar
          shape="square"
          :size="40"
          src="https://bookmanager.com/i/9204784/logo_navbar?1654361213"
          >icon</el-avatar
        ></router-link
      >
    </el-col>
    <el-col :span="10">
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#bdbebc"
        text-color="#fff"
        active-text-color="#c45656"
        @select="handleSelect"
        router
      >
        <el-menu-item index="1">电子浏览室</el-menu-item>
        <el-menu-item index="2">图书销售</el-menu-item>
        <el-menu-item index="/bookBrowsing">图书浏览</el-menu-item>
        <el-menu-item index="4">书吧小食</el-menu-item>
      </el-menu>
      <div class="h-6" />
    </el-col>
    <el-col :span="4"></el-col>
    <el-col :span="8">
      <el-row>
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
        <el-col :span="4"
          ><el-icon class="user" color="#fff" :size="25">
            <a href="./"><User /></a
          ></el-icon>
        </el-col>
        <el-col :span="4"
          ><el-icon class="shoppingCart" color="#fff" :size="25">
            <a href="./"><ShoppingCart /></a></el-icon
        ></el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { ElRow, ElCol, ElIcon } from "element-plus";
import { User, ShoppingCart } from "@element-plus/icons-vue";
export default {
  components: {
    ElCol,
    ElRow,
    ElIcon,
    User,
    ShoppingCart,
  },
  setup() {
    let navList = [{ name: "/bookBrowsing", navItem: "首页" }];
    return {
      navList,
    };
  },
};
</script>

<style scoped>
.el-row {
  margin: 0px;
}
/* .el-row:last-child { 
  margin: 0;
} */
.outside {
  margin-top: 10px;
}
.el-col {
  border-radius: 4px;
  height: 70px;
  text-align: center;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-menu {
  height: 70px;
}
.user,
.shoppingCart {
  margin-top: 20px;
}
.el-avatar {
  width: 100px;
  margin-top: 10px;
}
</style>